<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElCarousel, ElCarouselItem, ElCard, ElButton, ElRow, ElCol, ElImage, ElTag, ElScrollbar } from 'element-plus'
import { useRouter } from 'vue-router'
import http from '../../utils/http'
import { getImageUrl } from '../../utils/system'
import HeritageCard from '../../components/HeritageCard.vue'
import ActivityCard from '../../components/ActivityCard.vue'

// 公告数据
const announcementList = ref([
  { id: 1, title: '关于举办2025年非物质文化遗产保护宣传活动的通知', date: '2025-01-15' },
  { id: 2, title: '第三批国家级非物质文化遗产代表性项目代表性传承人推荐申报工作启动', date: '2025-01-10' },
  { id: 3, title: '非遗文化数字化保护项目阶段性成果展示会将于下月举办', date: '2025-01-05' },
  { id: 4, title: '关于加强非物质文化遗产知识产权保护的指导意见发布', date: '2024-12-28' },
  { id: 5, title: '2025年春节非遗文化展演活动安排出炉', date: '2024-12-20' }
])

const router = useRouter()

// 轮播图数据
const bannerList = ref([])
// 热门非遗文物数据
const hotHeritageList = ref([])
// 热门活动数据
const hotActivityList = ref([])
// 热门资讯数据
const hotNewsList = ref([])
// 加载状态
const loading = ref(false)

// 获取轮播图数据（使用获取全部的接口）
const getBannerList = async () => {
  try {
    const res = await http.get('/banner/list')
    if (res.code === 200) {
      bannerList.value = (res.data || []).map(t => {
        t.url = getImageUrl(t.url)
        return t
      });
    }
  } catch (error) {
    console.error('获取轮播图失败:', error)
  }
}

// 获取热门非遗文物（按浏览量降序，分页）
const getHotHeritageList = async () => {
  try {
    const res = await http.get('/culturalHeritage/hot?pageNum=1&pageSize=8&orderBy=view_count&orderType=desc')
    if (res.code === 200) {
      hotHeritageList.value = res.data?.records.map(t => {
        t.coverImage = getImageUrl(t.coverImage)
        return t
      })
    }
  } catch (error) {
    console.error('获取热门非遗文物失败:', error)
  }
}

// 获取热门活动（按浏览量降序，分页）
const getHotActivityList = async () => {
  try {
    const res = await http.get('/activity/hot?pageNum=1&pageSize=6&orderBy=view_count&orderType=desc')
    if (res.code === 200) {
      hotActivityList.value = res.data?.records || []
    }
  } catch (error) {
    console.error('获取热门活动失败:', error)
  }
}

// 获取热门资讯（按浏览量降序，分页）
const getHotNewsList = async () => {
  try {
    const res = await http.get('/article/hot?pageNum=1&pageSize=6&orderBy=view_count&orderType=desc')
    if (res.code === 200) {
      hotNewsList.value = res.data?.records.map(t => {
        t.coverUrl = getImageUrl(t.coverUrl)
        return t
      });
    }
  } catch (error) {
    console.error('获取热门资讯失败:', error)
  }
}

// 跳转到列表页
const goToList = (path) => {
  router.push(path)
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 获取日期中的天
const getDay = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return String(date.getDate()).padStart(2, '0')
}

// 获取日期中的月份
const getMonth = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
  return `2025-${months[date.getMonth()]}`
}

// 初始化数据
const initData = async () => {
  loading.value = true
  try {
    await Promise.all([
      getBannerList(),
      getHotHeritageList(),
      getHotActivityList(),
      getHotNewsList()
    ])
  } finally {
    loading.value = false
  }
}

// 跳转到资讯详情
const goToNewsDetail = (id) => {
  router.push({
    path: '/front/newsDetail',
    query: {
      id
    }
  })
}

// 查看更多公告
const viewMoreAnnouncements = (event) => {
  // 阻止默认跳转
  event.preventDefault();
  // 跳转到新闻列表页或公告详情页
  router.push('/front/news');
}

onMounted(() => {
  initData()
})

// 导出方法供模板使用
defineExpose({
  formatDate,
  getDay,
  getMonth
})
</script>

<template>
  <div class="home-container">
    <!-- 轮播图和公告栏组合区域 -->
    <div class="banner-announcement-container">
      <!-- 轮播图区域 -->
      <div class="banner-section">
        <el-carousel 
          v-if="bannerList.length > 0" 
          height="450px" 
          :interval="4000" 
          indicator-position="inside"
          arrow="hover"
        >
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <div 
              class="banner-item" 
              :style="{ backgroundImage: `url(${item.url})` }"
            >
              <div class="banner-content">
                <h2 class="banner-title">{{ item.title }}</h2>
                <p class="banner-desc">{{ item.description }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div v-else class="banner-placeholder">
          <div class="placeholder-content">
            <h2>非遗传承保护系统</h2>
            <p>传承文化瑰宝，保护非物质文化遗产</p>
          </div>
        </div>
      </div>

      <!-- 公告栏区域 -->
      <div class="announcement-section">
        <div class="announcement-wrapper">
          <div class="announcement-header">
            <div class="announcement-header-left">
              <span class="announcement-icon">📢</span>
              <h3 class="announcement-title">系统公告</h3>
            </div>
            <a href="#" class="announcement-more" @click="viewMoreAnnouncements">查看更多</a>
          </div>
          <el-scrollbar class="announcement-scrollarea">
            <div class="announcement-content">
              <div 
                v-for="item in announcementList" 
                :key="item.id" 
                class="announcement-item"
                @click="goToNewsDetail(item.id)"
              >
                <span class="announcement-text">{{ item.title }}</span>
                <span class="announcement-date">{{ item.date }}</span>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 热门非遗文物 -->
      <section class="section">
        <div class="section-header">
          <div class="section-title-wrapper">
            <div class="title-decoration left"></div>
            <h2 class="section-title">
              热门非遗文物
            </h2>
            <div class="title-decoration right"></div>
          </div>
          <el-button type="primary" class="more-btn" @click="goToList('/front/heritage')">
            查看更多
          </el-button>
        </div>
        <div class="heritage-grid">
          <HeritageCard 
            v-for="item in hotHeritageList" 
            :key="item.id"
            :heritage="item"
          />
        </div>
      </section>

      <!-- 热门活动 -->
      <section class="section">
        <div class="section-header">
          <div class="section-title-wrapper">
            <div class="title-decoration left"></div>
            <h2 class="section-title">
              最新活动
            </h2>
            <div class="title-decoration right"></div>
          </div>
          <el-button type="primary" class="more-btn" @click="goToList('/front/activity')">
            更多
          </el-button>
        </div>
        <div class="activity-layout">
          <!-- 主要活动（左侧大图） -->
          <div class="main-activity-wrapper">
            <ActivityCard 
              v-if="hotActivityList.length > 0"
              :activity="hotActivityList[0]"
              size="large"
            />
          </div>
          
          <!-- 其他活动（右侧小图列表） -->
          <div class="activity-list">
            <ActivityCard 
              v-for="(item, index) in hotActivityList.slice(1, 4)" 
              :key="item.id"
              :activity="item"
              size="small"
            />
          </div>
        </div>
      </section>

      <!-- 热门资讯 -->
      <section class="section">
        <div class="section-header">
          <div class="section-title-wrapper">
            <div class="title-decoration left"></div>
            <h2 class="section-title">
              最新资讯
            </h2>
            <div class="title-decoration right"></div>
          </div>
          <el-button type="primary" class="more-btn" @click="goToList('/front/news')">
            更多
          </el-button>
        </div>
        <div class="news-layout">
          <!-- 主要资讯（左侧大图） -->
          <div class="main-news" v-if="hotNewsList.length > 0" @click="goToNewsDetail(hotNewsList[0].id)">
            <el-image 
              :src="hotNewsList[0].coverUrl" 
              :alt="hotNewsList[0].title"
              class="main-news-image"
              fit="cover"
            >
              <template #error>
                <div class="image-error">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </template>
            </el-image>
            <div class="main-news-content">
              <h3 class="news-title">{{ hotNewsList[0].title }}</h3>
              <div class="news-date">{{ hotNewsList[0].intro }}</div>
            </div>
          </div>
          
          <!-- 其他资讯（右侧列表） -->
          <div class="news-list">
            <div 
              v-for="(item, index) in hotNewsList.slice(1, 5)" 
              :key="item.id" 
              class="news-item"
              @click="goToNewsDetail(item.id)"
            >
              <div class="news-cover-box">
                <img :src="item.coverUrl" alt="">
              </div>
              <div class="news-content">
                <h4 class="news-title">{{ item.title }}</h4>
                <p class="news-summary">{{ item.intro }}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 系统主题色定义
:root {
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --background-light: #f8f9fa;
  --background-white: #ffffff;
  --border-light: rgba(0, 0, 0, 0.06);
  --shadow-light: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.15);
  --primary-color: #4a148c;
  --secondary-color: #880e4f;
}

.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  margin: 0;
  width: 100%;
}

// 轮播图和公告栏组合布局
.banner-announcement-container {
  width: 95%;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  padding: 20px 15px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 0;
}

// 轮播图样式调整
.banner-section {
  flex: 3;
  width: 100%;
}

// 公告栏样式调整
.announcement-section {
  flex: 0.8;
  width: 100%;
  min-width: 260px;
  position: relative;
  z-index: 3;
}

.announcement-wrapper {
  background: var(--background-white);
  border-radius: 12px;
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-light);
  padding: 16px;
  height: 450px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.announcement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ff0000;
}

.announcement-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcement-icon {
  font-size: 20px;
  color: #e84393;
}

.announcement-title {
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin: 0;
}

.announcement-more {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
  
  &:hover {
    color: #e84393;
  }
}

.announcement-scrollarea {
  flex: 1;
  border-radius: 8px;
}

.announcement-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  position: relative;
}

.announcement-item:hover {
  background: #f8f9fa;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.announcement-item::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #e84393;
  border-radius: 50%;
}

.announcement-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  margin: 0;
  padding-left: 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-date {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
  white-space: nowrap;
}

// 轮播图样式
.banner-section {
  width: 100%;
  
  // 调整轮播图控制器样式
  :deep(.el-carousel__arrow) {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 16px;
    
    &:hover {
      background-color: #fff;
      color: #e84393;
    }
  }
  
  // 调整轮播图指示器样式
   :deep(.el-carousel__indicators) {
     bottom: 20px;
     
     .el-carousel__indicator {
       width: 6px;
       height: 6px;
       margin: 0 4px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.6);
       border: 1px solid transparent;
       transition: all 0.3s ease;
       
       &:hover {
         background-color: rgba(255, 255, 255, 0.8);
       }
       
       &.is-active {
         width: 18px;
         border-radius: 3px;
         background-color: #ff2554;
         border-color: #fff;
       }
     }
   }
  
  .banner-item {
    height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    }
    
    .banner-content {
      position: absolute;
      bottom: 60px;
      left: 60px;
      color: white;
      z-index: 2;
      max-width: 60%;
      
      .banner-title {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 12px;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
        animation: fadeInUp 0.8s ease-out;
      }
      
      .banner-desc {
        font-size: 16px;
        opacity: 0.9;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
        font-weight: 400;
        animation: fadeInUp 0.8s ease-out 0.2s both;
      }
    }
  }
  
  .banner-placeholder {
    height: 450px;
    background: linear-gradient(135deg, #e84393 0%, #a29bfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 12px;
    
    .placeholder-content {
      text-align: center;
      
      h2 {
        font-size: 36px;
        margin-bottom: 12px;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
        font-weight: 700;
      }
      
      p {
        font-size: 16px;
        opacity: 0.9;
        font-weight: 400;
      }
    }
  }
}

// 渐入动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 主要内容区域
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}

// 区块样式
.section {
  margin-bottom: 30px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    .section-title-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      position: relative;
      
      .title-decoration {
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%);
        flex: 1;
        
        &.left {
          margin-right: 15px;
        }
        
        &.right {
          margin-left: 15px;
        }
      }
      
      .section-title {
        font-size: 32px;
        font-weight: 700;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: center;
        white-space: nowrap;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        background-clip: text;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 50px;
          height: 2.5px;
          background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
          border-radius: 2px;
        }
        
        .title-icon {
          font-size: 28px;
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }
      }
    }
    
    .more-btn {
      // background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      border: none;
      border-radius: 25px;
      padding: 10px 20px;
      font-weight: 600;
      box-shadow: var(--shadow-light);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
      }
    }
  }
}

// 非遗文物卡片样式
.heritage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  padding: 8px 0;
}

.heritage-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
  
  .heritage-image {
    width: 100%;
    height: 200px;
  }
  
  .heritage-info {
    padding: 16px;
    
    .heritage-name {
      font-size: 16px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .heritage-category {
      font-size: 14px;
      color: #7f8c8d;
      margin-bottom: 12px;
    }
    
    .heritage-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

// 活动布局样式
.activity-layout {
  display: flex;
  gap: 20px;
  padding: 8px 0;
}
  
  .main-activity-wrapper {
    flex: 1.2;
  }
  
  .activity-list {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .activity-item {
      display: flex;
      background: var(--background-white);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-light);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      border: 1px solid var(--border-light);
      
      &:hover {
        transform: translateX(8px);
        box-shadow: var(--shadow-hover);
        border-color: var(--primary-color);
      }
      
      .activity-image {
        width: 90px;
        height: 90px;
        object-fit: cover;
        background: linear-gradient(135deg, var(--background-light) 0%, #e9ecef 100%);
        flex-shrink: 0;
      }
      
      .activity-content {
        padding: 16px 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .activity-title {
          font-size: 15px;
          font-weight: 600;
          color: var(--text-primary);
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 10px;
        }
        
        .activity-date {
          color: var(--primary-color);
          font-size: 13px;
          font-weight: 600;
        }
      }
    }
  }

// 资讯布局样式
.news-layout {
  display: flex;
  gap: 20px;
  padding: 8px 0;
}
  
  .main-news {
    flex: 1.2;
    position: relative;
    cursor: pointer;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    
    &:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-hover);
      border-color: var(--primary-color);
    }
    
    .main-news-image {
      width: 100%;
      height: 280px;
      object-fit: cover;
      background: linear-gradient(135deg, var(--background-light) 0%, #e9ecef 100%);
    }
    
    // .main-news-overlay {
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    //   right: 0;
    //   background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    //   padding: 40px 24px 24px;
    //   color: white;
      
    //   .news-date {
    //     position: absolute;
    //     top: -30px;
    //     right: 24px;
    //     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    //     color: white;
    //     padding: 8px 16px;
    //     border-radius: 20px;
    //     font-size: 13px;
    //     font-weight: 600;
    //     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    //   }
      
    //   .news-title {
    //     font-size: 22px;
    //     font-weight: 700;
    //     margin: 0;
    //     line-height: 1.4;
    //     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    //   }
    // }
    
    .main-news-content {
      padding: 20px;
      
      .news-title {
        font-size: 18px;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 10px;
        line-height: 1.4;
      }
      
      .news-date {
        font-size: 14px;
        color: #95a5a6;
      }
    }
  }
  
  .news-list {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .news-item {
      display: flex;
      background: var(--background-white);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-light);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      border: 1px solid var(--border-light);
      
      &:hover {
        transform: translateX(8px);
        box-shadow: var(--shadow-hover);
        border-color: var(--primary-color);
      }
      
      .news-image {
        width: 90px;
        height: 90px;
        object-fit: cover;
        background: linear-gradient(135deg, var(--background-light) 0%, #e9ecef 100%);
        flex-shrink: 0;
      }
      
      .news-cover-box {
        flex-shrink: 0;
        width: 50px;
        text-align: center;
        display: flex;
        align-items: center;
        
        img {
          width: 55px;
          height: 55px;
          overflow: hidden;
          background-size: cover;
          background-position: center;
        }
      }
      
      .news-content {
        flex: 1;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .news-title {
          font-size: 15px;
          font-weight: 600;
          color: var(--text-primary);
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 10px;
        }
        
        .news-date {
          color: var(--primary-color);
          font-size: 13px;
          font-weight: 600;
        }
        
        .news-summary {
          font-size: 12px;
          color: #7f8c8d;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }

// 图片错误占位符
.image-error {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--background-light) 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

// 响应式设计
@media (max-width: 1024px) {
  .banner-announcement-container {
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
  }
  
  .announcement-section {
    min-width: auto;
  }
  
  .announcement-wrapper {
    height: auto;
    max-height: 400px;
  }
  
  .main-content {
    max-width: 95%;
    padding: 0 15px;
  }
  
  .activity-layout,
  .news-layout {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .banner-item .banner-content {
    bottom: 30px;
    left: 30px;
    
    .banner-title {
      font-size: 32px;
    }
    
    .banner-desc {
      font-size: 16px;
    }
  }
  
  .banner-placeholder .placeholder-content h2 {
    font-size: 32px;
  }
  
  .main-content {
    padding: 0 10px;
  }
  
  .section {
    margin-bottom: 30px;
    
    .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 20px;
      
      .section-title-wrapper {
        .section-title {
          font-size: 28px;
        }
        
        .title-decoration {
          &.left {
            margin-right: 15px;
          }
          
          &.right {
            margin-left: 15px;
          }
        }
      }
    }
  }
  
  .heritage-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  // 活动布局响应式
  .activity-layout {
    flex-direction: column;
    gap: 30px;
    
    .main-activity-wrapper {
      order: 1;
    }
    
    .activity-list {
      order: 2;
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
  
  // 资讯布局响应式
  .news-layout {
    flex-direction: column;
    gap: 30px;
    
    .main-news {
      .main-news-image {
        height: 220px;
      }
    }
    
    .news-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      
      .news-item {
        .news-image {
          width: 80px;
          height: 80px;
        }
        
        .news-content {
          padding: 12px 16px;
          
          .news-title {
            font-size: 14px;
          }
          
          .news-date {
            font-size: 12px;
          }
          
          .news-summary {
            font-size: 11px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .banner-section {
    .banner-item,
    .banner-placeholder {
      height: 300px;
      
      .banner-content,
      .placeholder-content {
        bottom: 40px;
        left: 40px;
        
        .banner-title,
        h2 {
          font-size: 32px;
        }
        
        .banner-desc,
        p {
          font-size: 16px;
        }
      }
    }
  }
  
  .section {
    .section-header {
      .section-title-wrapper {
        .section-title {
          font-size: 24px;
        }
      }
    }
  }
}
</style>